﻿
@{
    Layout = null;
}
<style>
    .layui-tree-icon {
        height: 14px !important;
        width: 14px !important;
    }
</style>

@*列表页头部*@
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;padding: 15px;">
        <a lay-href="">主页</a><span lay-separator="">/</span>
        <a><cite>系统管理</cite></a><span lay-separator="">/</span>
        <a><cite>角色管理</cite></a>
    </div>
</div>

@*列表搜索*@
<div class="demoTable" style="padding-left: 15px;">
    <div style="display: inline-block;">
        名称：
        <div class="layui-inline">
            <input class="layui-input" name="name" id="name" autocomplete="off" placeholder="请输入名称">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <div style="float: right;padding-right: 10px;">
        <button class="layui-btn" data-type="add">新增</button>
    </div>
</div>

@*列表*@
<table class="layui-hide" id="tableList" lay-filter="List"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="role">设置权限</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

@*弹窗*@
<script type="text/template" id="add_box">
    <div class="layui-form layui-form-pane" style="padding:10px">
        <input type="text" name="id" id="box_id" class="layui-input" style="display:none">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="box_name" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" id="box_description" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <button class="layui-btn" style="display:none;" lay-submit lay-filter="submitForm" id="submitForm">提交</button>
    </div>
</script>

@*弹窗*@
<script type="text/template" id="role_box">
    <input type="text" name="roleId" id="roleId" class="layui-input" style="display:none">
    <div class="layui-form layui-form-pane" style="padding:10px">
        <div class="layui-form-item">
            <div id="roleTree"></div>
        </div>
        <button class="layui-btn" style="display:none;" lay-submit lay-filter="submitForm" id="submitRole">提交</button>
    </div>

</script>

<script>
    layui.use(['table', 'form', 'tree'],
        function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var tree = layui.tree;

            function initIndex() {
                table.render({
                    id: 'List',
                    elem: '#tableList',
                    url: '/StudentManage/Role/List',
                    title: '用户数据表',
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true },
                            { field: 'name', title: '用户名', width: 350, align: 'center' },
                            { field: 'description', title: '描述', width: 1000, align: 'center' },
                            { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 300, align: 'center' }
                        ]
                    ],
                    done: function () { // 隐藏id列
                        $("[data-field='id']").css('display', 'none');
                    },
                    page: true
                });
            }

            //初始化列表页面
            initIndex();

            //初始化表单页面
            function initForm(formObj, dataObj) {
                console.log(dataObj);
                if (!!dataObj) {
                    $("#box_id").val(dataObj.id);
                    $("#box_name").val(dataObj.name);
                    $("#box_description").val(dataObj.description);
                }
                //表单提交
                form.on('submit(submitForm)',
                    function (data) {
                        var url = '/StudentManage/Role/Add';
                        if (!!data.field.id) {
                            url = '/StudentManage/Role/Edit';
                        }
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: data.field,
                            dataType: "json",
                            beforeSend: function () {
                            },
                            success: function (data) {
                                if (data.msg) {
                                    layer.msg(data.message, { icon: 6, time: 1000, shade: 0.08 });
                                    layer.close(formObj);
                                    initIndex();
                                } else {
                                    layer.msg(data.message, { icon: 5, time: 1000, shade: 0.08 });
                                }
                            },
                            complete: function () {
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                            }
                        });
                    });
                form.render();
                return false;
            }

            //页面事件
            var active = {
                reload: function () {
                    var name = $('#name');
                    //执行重载
                    table.reload('List',
                        {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where: {
                                Name: name.val()
                            }
                        },
                        'data');
                },
                add: function () {
                    var str = $('#add_box').html();
                    var addForm = layer.open({
                        title: "添加",
                        type: 1,
                        area: ['600px', '550px'],
                        content: str,
                        resize: true,
                        scrollbar: false,
                        fixed: false,
                        btn: ['确定', '取消'],
                        yes: function (index, obj) { //保存按钮事件
                            $("#submitForm").click();
                        },
                        btn2: function (index, obj) { //窗口关闭按钮事件
                            layer.close(index);
                        },
                        cancel: function (index) { //窗口关闭按钮事件
                            layer.close(index);
                        }
                    });

                    initForm(addForm);
                }
            };

            //监听页面工具事件（搜索、新增、刷新等）
            $('.demoTable .layui-btn').on('click',
                function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            //监听行工具事件（编辑、删除等）
            table.on('tool(List)',
                function (obj) {
                    var data = obj.data;
                    console.log(obj);
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么？',
                            function (index) {
                                $.ajax({
                                    type: "POST",
                                    url: '/StudentManage/Role/Delete',
                                    data: { id: data.id },
                                    dataType: "json",
                                    beforeSend: function () {
                                    },
                                    success: function (data) {
                                        if (data.msg) {
                                            layer.msg(data.message, { icon: 6, time: 1000, shade: 0.08 });
                                            layer.close(index);
                                            initIndex();
                                        } else {
                                            layer.msg(data.message, { icon: 5, time: 1000, shade: 0.08 });
                                        }
                                    },
                                    complete: function () {
                                    },
                                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    }
                                });
                            });
                    }
                    if (obj.event === 'edit') {
                        var editForm = layer.open({
                            title: "编辑",
                            type: 1,
                            area: ['600px', '550px'],
                            content: $('#add_box').html(),
                            resize: true,
                            scrollbar: false,
                            fixed: false,
                            btn: ['确定', '取消'],
                            yes: function (index, obj) { //保存按钮事件
                                $("#submitForm").click();
                            },
                            btn2: function (index, obj) { //窗口关闭按钮事件
                                layer.close(index);
                            },
                            cancel: function (index) { //窗口关闭按钮事件
                                layer.close(index);
                            }
                        });

                        initForm(editForm, data);
                    }
                    if (obj.event === 'role') {
                        var str = $('#role_box').html();

                        var roleForm = layer.open({
                            title: "菜单权限",
                            type: 1,
                            area: ['600px', '550px'],
                            content: str,
                            resize: true,
                            scrollbar: false,
                            fixed: false,
                            btn: ['确定', '取消'],
                            yes: function (index, obj) { //保存按钮事件
                                $("#submitRole").click();
                            },
                            btn2: function (index, obj) { //窗口关闭按钮事件
                                layer.close(index);
                            },
                            cancel: function (index) { //窗口关闭按钮事件
                                layer.close(index);
                            },
                            success: function (layero, index) {
                                $.ajax({
                                    type: 'GET',
                                    url: '/StudentManage/Module/ListByRoleId',
                                    dataType: "json",
                                    data: { roleId: data.id },
                                    async: false,
                                    success: function (res) {
                                        if (res.msg) {
                                            //渲染
                                            var inst1 = tree.render({
                                                elem: '#roleTree',  //绑定元素
                                                showCheckbox: true,  //是否显示复选框
                                                id: 'moduleTree',
                                                isJump: true,//是否允许点击节点时弹出新窗口跳转
                                                data: res.data
                                            });
                                        } else {
                                            layer.msg(res.message, { icon: 5, time: 1000, shade: 0.08 });
                                        }
                                    }
                                });

                                //表单提交 保存权限
                                form.on('submit(submitForm)',
                                    function (res) {
                                        function getCheckedId(jsonObj) {
                                            var id = "";
                                            $.each(jsonObj,
                                                function (index, item) {
                                                    if (id != "") {
                                                        id = id + "," + item.id;
                                                    } else {
                                                        id = item.id;
                                                    }
                                                    var i = getCheckedId(item.children);
                                                    if (i != "") {
                                                        id = id + "," + i;
                                                    }
                                                });
                                            return id;
                                        }

                                        var checkedData = tree.getChecked('moduleTree');
                                        var ids = getCheckedId(checkedData);
                                        $.ajax({
                                            type: "POST",
                                            url: '/StudentManage/Role/SaveRoleModule',
                                            data: { roleId: $("#roleId").val(), moduleIds: ids },
                                            dataType: "json",
                                            beforeSend: function () {
                                            },
                                            success: function (res) {
                                                if (res.msg) {
                                                    layer.msg(res.message, { icon: 6, time: 1000, shade: 0.08 });
                                                    layer.close(roleForm);
                                                    initIndex();
                                                } else {
                                                    layer.msg(res.message, { icon: 5, time: 1000, shade: 0.08 });
                                                }
                                            },
                                            complete: function () {
                                            },
                                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                            }
                                        });
                                    });

                                $("#roleId").val(data.id);
                                form.render();
                            }
                        });
                    }
                });
        });
</script>
